import React, { useEffect, useState } from "react";
import style from "./Home.module.scss";
import { Button, Image, SearchBar, Tabs } from "antd-mobile";
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
import { HomeAdvertising } from "@/api/Home";

const HomeView = () => {
  // 获取当前路由的信息
  const { pathname } = useLocation();

  // 接收顶部广告数据
  // const [Advertising, setAdvertising] = useState<any>({});

  const navigate = useNavigate();

  // 发送请求获取顶部广告图
  // useEffect(() => {
  //   HomeAdvertising().then((res) => {
  //     if (res.data.code === "200") {
  //       setAdvertising(res.data.data);
  //     }
  //   });
  // }, []);

  return (
    <div style={{ overflow: "auto" }}>
      {/* 控制广告栏的显示 */}
      {/* {!!Advertising.length &&
        Advertising.map((val: any) => {
          return <Image key={val.picUrl} src={val.picUrl} />;
        })} */}
      <div className={style.topOne}>
        <div className={style.top_top}>
          <Image
            src="https://inews.gtimg.com/newsapp_bt/0/14771208323/1000"
            className={style.img_top}
          />
          <SearchBar
            onFocus={() => {
              navigate("/search");
            }}
            placeholder="搜索,共127608款好物"
            className={style.inp}
          />
          <Button
            color="danger"
            size="mini"
            className={style.btn}
            onClick={() => {
              navigate("/mine");
            }}
          >
            登录
          </Button>
        </div>
        <div className={style.top_bottom}>
          <Tabs
            activeKey={pathname}
            defaultActiveKey="1"
            style={{ marginTop: 60 }}
            onChange={(key) => {
              // 根据当前点击的key进行跳转
              navigate(key);
            }}
          >
            <Tabs.Tab title="推荐" key="/home/recommend">
              <Outlet></Outlet>
            </Tabs.Tab>
            <Tabs.Tab title="居家生活" key="/home/FamilyLife">
              <Outlet></Outlet>
            </Tabs.Tab>
            <Tabs.Tab title="服饰鞋包" key="3">
              3
            </Tabs.Tab>
            <Tabs.Tab title="美食酒水" key="4">
              4
            </Tabs.Tab>
            <Tabs.Tab title="个护清洁" key="5">
              5
            </Tabs.Tab>
            <Tabs.Tab title="母婴亲子" key="6">
              6
            </Tabs.Tab>
            <Tabs.Tab title="运动旅游" key="7">
              7
            </Tabs.Tab>
            <Tabs.Tab title="数码家电" key="8">
              8
            </Tabs.Tab>
            <Tabs.Tab title="严选全球" key="9">
              9
            </Tabs.Tab>
          </Tabs>
        </div>
      </div>
    </div>
  );
};

export default HomeView;
